<template>
	<!-- 物资管理列表 -->
	<view>
		<view class="page">
			<view class="example-body" v-if ="equipmentRun">
				<uni-nav-bar background-color="#003466" color="#ffffff" :status-bar="true" @click-left="back" left-icon="arrowleft" style="position: relative;">
					<view class="flex-item" style="position: absolute;left: 0;right: 0;margin: auto;width: 50%;">维护管理</view>
					<view class="flex-item flex-right" style="position: absolute;right: 22px;" @click="showDrawer">
						<uni-icon type="bars" size="28" color="#ffffff"></uni-icon>
					</view>
				</uni-nav-bar>
			</view>
			<!--抽屉筛选条件-->
			<uni-drawer v-if="equipmentRun" :visible="showRight" mode="right" @close="closeDrawer">
				<uni-search @searchData="searchData" :listData="drawerData" :listParam="listParam"></uni-search>
			</uni-drawer>

			<view>
				<view class="supply-search" v-if="equipmentRun">
					<input type="text" value="" class="search-container" />
					<view class="item" v-for="(value, index) in iconType" :key="index">
					<uni-icon :type="value" :size="24"  color="#A0A0A0" class="listsearch"></uni-icon>
					</view>
					<view class="right-ly"></view>
				</view>

				<!--分页内容展示-->
				<view class="index-list" style="flex: 1;" v-for="(item,index) in listData" :key="index">
					<view class="index-option">
						<view class="option-container">
							<!--任务优先级 -->
							<view class="container_index" :class="item.priorityLevel=='001'?'active1':item.priorityLevel=='002'?'active2':'active3'"></view>
							<view class="index_bottomwords">{{item.equipmentRowGuid}}</view>
							<view class="index-pic">
								<!--任务状态  003 已完成 002 已接收 001 待接收-->
								<image :src="item.status=='001'?'../../../static/images/reddjs.png':item.status=='002'?'../../../static/images/blueyjs.png':'../../../static/images/greenbj.png'"
								 mode=""></image>
							</view>
						</view>
						<!-- <view class="option_index-words">......| dateFormat</view> -->
						<view class="open-bottom-words">{{item.createTime }}</view>
						<view class="opem-choose">
							<navigator v-if="equipmentRun" class="opem-choosetwo" :url="'maintenance-manage-detail?id='+listData[index].id+'&system='+listData[index].equipmentRowGuid+'&status='+item.status">查看详情</navigator>
							<navigator v-if="!equipmentRun" class="opem-choosetwo" :url="'../../project-maintenance/maintenance-manage/maintenance-manage-detail?id='+listData[index].id+'&system='+listData[index].equipmentRowGuid+'&status='+item.status">查看详情</navigator>
							<view class="opem-chooseone" v-show="item.status=='001'" @click="receiveTask(listData[index])">接收</view>
						</view>
					</view>
				</view>

				<!--3使用组件-->
				<uni-load-more :status="loadingType" :contentText="contentText"></uni-load-more>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import UniIcon from '@/components/uni-icon/uni-icon.vue';
	////1引入组件 uni-load-more.vue
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	//2.引入组件 uni-search.vue
	import uniSearch from '@/components/uni-search/uni-search.vue'
	import tools from '@/common/tools-new.js';
	import cmdIcon from '@/components/cmd-icon/cmd-icon.vue'

	export default {
		components: {
			uniDrawer,
			uniNavBar,
			UniIcon,
			//2.注册组件
			uniLoadMore,
			//搜索条件
			uniSearch,
			cmdIcon
		},
		props:{
			// equipmentRun:Boolean,
			eqIds:String,
		},
		data() {
			return {
				equipmentRun:true,
				iconType: ['search'],
				showRight: false,
				/**
				 * 任务字典
				 * */
				dic_data: [{
						name: "任务分类",
						data: []
					},
					{
						name: "状态",
						data: []
					},
					{
						name: "优先级别",
						data: []
					},
				],
				/*
				 * 抽屉数据集合
				 */
				drawerData: [{
						"key": "任务分类", //分类名称
						"value": "category", //字段列名
						"lists": []
						// "lists": [{ //分类值集合
						// 	"key": "", //分类值键
						// 	"value": "", //分类值value
						// 	"isChecked": false //是否选中
						// }]
					},
					{
						"key": "任务状态",
						"value": "status",
						"lists": []
					},
					{
						"key": "任务优先级",
						"value": "priorityLevel",
						"lists": []
					}
				],
				/**
				 * 列表筛选条件
				 */
				listParam: {
					parameter: "equipmentRowGuid",
					operators: "0",
					queryValue: "",
					pageSize: 8,
					pageIndex: 1,
					orderBy: "startTime",
					orderByType: "1"
				},
				/*
				 *数据集合
				 */
				listData: [],
				/*
				 *定义加载方式  'more'---contentdown  'loading'---contentrefresh 'datas'---contentnomore
				 */
				loadingType: 'more',
				/*
				 *加载方式文字提示
				 */
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				objData: [], //所有待处理对象
				eqId: "", //传详情得id
			};
		},

		// 日期过滤器
		filters: {
			dateFormat(time) {
				// console.log(this.$helper.dateFormat('2019-08-27T17:00:49.5194153', false));
				return tools.dateFormat(time, false);
			}
		},
		methods: {
			
			//设备设施跳转来
			async getId(value){
				this.listParam.queryValue = value;
				
				await this.$api.MaintenanceTask.GetObjectName().then(res => {
					this.objData = res[1].data.result;
				}).catch(res => {
					uni.showToast({
						title: '处理对象获取失败',
						duration: 2000
					});
				})
				
				this.getDataList();
				this.equipmentRun=false;
			},
			
			/*
			 *展开抽屉
			 */
			showDrawer() {
				// console.log(JSON.stringify(this.dic_data))
				if (this.drawerData[0].lists.length == 0) {
					this.drawerData.forEach((item, index) => {
						this.dic_data[index].data.forEach((v, k) => {
							item.lists.push({
								key: v,
								value: k,
								isChecked: false
							});
						})
					})
				}
				// console.log(JSON.stringify(this.drawerData))
				this.showRight = true;
			},
			/*
			 *
			 * 关闭抽屉
			 */
			closeDrawer() {
				this.showRight = !this.showRight;
			},
			hide() {
				this.showRight = false;
			},
			confirm() {},
			back() {
				uni.navigateBack({
					delta: 1
				});
				// uni.navigateTo({
				//     url: 'pages/engineering-Maintenance/engineering_Maintenance'
				// });
			},
			/*
			 *
			 * 检索条件
			 */
			searchData(infoData) {
				this.showRight = false;
				this.listParam = infoData;
				this.listParam.pageIndex = 1;
				this.getDataList();
			},

			/*调用接口 demo 初始化加载*/
			getDataList() {
				//显示加载动画
				this.loadingType = 'more';
				uni.showNavigationBarLoading();
				this.$api.MaintenanceTask.ShowData(this.listParam).then(res => {
					
					var list = res[1].data.result.items;
					if (list.length == 0) {
						this.listData = [];
						this.loadingType = 'datas';
						//关闭加载动画
						uni.hideNavigationBarLoading();
						return false;
					}
					// console.log(list);
					// console.log(this.objData);
					list.forEach(ele => {
						this.objData.forEach(e => {
							if (ele.equipmentRowGuid == e.ojbectId) {
								ele.equipmentRowGuid = e.ojbectName;
							}
						})
						ele.createTime=this.$helper.dateFormat(ele.createTime,false);
					})
					this.listData = list;
					
					
					//关闭动画
					uni.hideNavigationBarLoading();
					//得到数据后停止刷新
					uni.stopPullDownRefresh();
				}).catch(res => {
					// 失败进行的操作/给出提示
					uni.showToast({
						title: '失败进行的操作',
						duration: 2000
					});
				})
			},

			/*第二次调用 demo 加载更多*/
			getMoreDataList() {
				this.listParam.pageIndex++;
				//loadingType!=more;直接返回
				if (this.loadingType != 'more') {
					return false;
				}
				this.loadingType = 'loading';
				//显示加载动画
				uni.showNavigationBarLoading();
				//请求接口
				this.$api.MaintenanceTask.ShowData(this.listParam).then(res => {
					
					if (this.listData.length == res[1].data.result.totalCount) {
						this.loadingType = 'datas';
						//关闭加载动画
						uni.hideNavigationBarLoading();
						return false;
					}
					this.listData = this.listData.concat(res[1].data.result.items);
					this.listData.forEach(ele => {
						this.objData.forEach(e => {
							if (ele.equipmentRowGuid == e.ojbectId) {
								ele.equipmentRowGuid = e.ojbectName;
								this.eqId = ele.id;
							}
						})
					})
					//将loadingType归more重置
					this.loadingType = 'more';
					//关闭加载动画
					uni.hideNavigationBarLoading();
				}).catch(res => {
					// 失败进行的操作/给出提示
					uni.showToast({
						title: '接口数据请求失败',
						duration: 2000
					});
				})
			},

			//接收任务
			receiveTask(data) {
				let param = {
					id: data.id,
					state: "002"
				};
				this.$api.MaintenanceTask.ReciveTask(param).then(res => {
					if(res[1].data.success){
						uni.showToast({
							title: '接收成功',
							duration: 2000
						});
						this.getDataList();
					}
					
				}).catch(res => {
					// 失败进行的操作/给出提示
					uni.showToast({
						title: '接收失败',
						duration: 2000
					});
				})
			}

		},

		/**
		 * 初次加载数据
		 * */
		onLoad: async function() {
			this.$helper.getDicByCodeName(this.dic_data);
			//获取所有对象
			await this.$api.MaintenanceTask.GetObjectName().then(res => {
				this.objData = res[1].data.result;
			}).catch(res => {
				uni.showToast({
					title: '处理对象获取失败',
					duration: 2000
				});
			})
			this.getDataList();
		},

		onShow() {
			this.getDataList();
		},
		
		/**
		 * 下拉刷新请求的一次数据
		 *
		 */
		onPullDownRefresh: function() {
			this.listParam.pageIndex = 1;
			this.getDataList();
		},

		/**
		 * 触底的时候请求数据，即为上拉加载更多
		 * */
		onReachBottom: function() {
			//console.log("onReachBottom")
			var timer = null;
			var _this = this;
			if (timer != null) {
				clearTimeout(timer)
			}
			timer = setTimeout(function() {
				_this.getMoreDataList();
			}, 1000)
		},

		onNavigationBarButtonTap(e) {
			this.showRight = !this.showRight;
		},

		onBackPress() {
			if (this.showRight) {
				this.hide();
				return true;
			}
		},

	};
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #F2F2F2;
	}
	
	.flex-item {
		font-size: 20px;
		text-align: center;
	}
	
	.uni-icon {
		padding-left: 42%;
	}
	
	.uni-navbar__header-btns:last-child {
		width: 120px;
	}
	
	.uni-navbar__header-btns {
		padding: 0;
	}
	
	.example-body{
		position: relative;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1;
	}

	.supply-search {
		width: 94%;
		height: 36px;
		border-radius: 17px;
		background-color: #ffffff;
		margin: 0 auto;
		margin-top: 15px;
		position: relative;
		overflow: hidden;
	}

	.supply-search .search-container {
		width: 76%;
		height: 36px;
		margin: 0 auto;
		background-color: #ffffff;
		font-size: 14px;
		color: #999999;
		position: absolute;
		top: 0;
		left: 42px;
	}

	.supply-search .search-item {
		position: absolute;
		left: 14px;
		top: 10px;
	}

	.supply-search .right-ly {
		width: 12px;
		height: 17px;
		float: right;
		background: url(../../../static/images/chartly.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 10px;
		right: 16px;
	}

	.supply-option .option-zl {
		width: 70px;
		float: left;
		color: #666666;
	}

	.supply-option .option-wa {
		float: left;
		margin-left: 19px;
		color: #333333;
	}

	.supply-option .option-right {
		width: 41px;
		height: 17px;
		display: flex;
		justify-content: center;
		align-items: center;
		float: right;
		margin-top: 14.5px;
	}

	.supply-option .option-right image {
		max-width: 100%;
		max-height: 100%;
	}

	.uni-title .title-draw {
		width: 94%;
		height: 20px;
		margin: 0 auto;
		font-size: 14px;
		color: #333333;
		margin-top: 5px;
	}

	.uni-title .top-select {
		width: 94%;
		height: 25px;
		line-height: 25px;
		font-size: 14px;
		border-radius: 3px;
		outline: none;
		margin: 0 auto;
		margin-top: 10px;
	}

	.show-box .input.data-v-3b0702b8 {
		font-size: 12px;
	}

	input {
		min-height: inherit;
	}

	.index-list {
		width: 94%;
		margin: 0 auto;
		margin-bottom: 10px;
	}

	.index-list .index-option {
		width: 100%;
		background-color: #ffffff;
		margin: 0 auto;
		margin-top: 10px;
		border-radius: 3px;
	}

	.option-container {
		overflow: hidden;
		padding: 10px;
	}

	/*任务优先级状态 active*/
	.option-container .active1 {
		background-color: #32ea8d;
	}

	.option-container .active2 {
		background-color: #2bb8f5;
	}

	.option-container .active3 {
		background-color: #f60;
	}

	.container_index {
		width: 10px;
		height: 10px;
		/*
		background-color: #e75f5f;
		background-color: '#f60';*/
		border-radius: 50%;
		float: left;
		margin: 6px;
	}

	.new-zeracolor {
		background-color: #ff9900;
	}

	.three-zeracolor {
		background-color: #458cd0;
	}

	.index_bottomwords {
		font-size: 16px;
		color: #333333;
		float: left;
	}

	.index-pic {
		width: 50px;
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		float: right;
		margin-top: 1.3px;
	}

	.index-pic image {
		max-width: 96%;
		max-height: 100%;
	}

	.option_index-words {
		font-size: 15px;
		color: #999999;
		padding-left: 15px;
	}

	.open-bottom-words {
		font-size: 15px;
		color: #999999;
		padding-left: 15px;
		padding-top: 10px;
	}

	.opem-choose {
		width: 100%;
		height: 26px;
		margin-top: 12px;
		padding-bottom: 16px;
	}

	.opem-chooseone {
		width: 64px;
		height: 30px;
		background: #458cd0;
		color: #ffffff;
		text-align: center;
		line-height: 30px;
		font-size: 11px;
		border-radius: 3px;
		float: right;
		margin-right: 8px;
	}

	.opem-choosetwo {
		width: 64px;
		height: 30px;
		border: 1px solid #458cd0;
		color: #458cd0;
		font-size: 11px;
		text-align: center;
		line-height: 30px;
		float: right;
		border-radius: 3px;
		margin-right: 10px;
	}
	
	.listsearch{
		padding: 0;
		position: absolute;
		top: 6px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.uni-drawer.uni-drawer--visible .uni-drawer__content{
		overflow: auto;
	}
</style>
